<template>
	<view class="container">
		<process :insflowid="process.InsFlowId" route="change-attend-apply" :data="data" checkName="getPermitChangeWorkType" @confirm="confirm">
			<view class="container__card">
				<view class="container__card--form">
					<view class="container__card--form-label">审批编号</view>
					<view class="container__card--form-value">{{formatId(process.CreateTime)}}{{process.InsFlowId}}</view>
				</view>
				<view class="container__card--form">
					<view class="container__card--form-label">班次1</view>
					<view class="container__card--form-value">
						<text>{{data.DateA}}</text>
						<text style="margin: 0 10rpx;">{{data.TypeNameA}}</text>
						<text>{{data.NameA}}</text>
					</view>
				</view>
				<view class="container__card--form">
					<view class="container__card--form-label">班次2</view>
					<view class="container__card--form-value">
						<text>{{data.DateB}}</text>
						<text style="margin: 0 10rpx;">{{data.TypeNameB}}</text>
						<text>{{data.NameB}}</text>
					</view>
				</view>
				<view class="container__card--form" v-if="data.Reason">
					<view class="container__card--form-label">调班理由</view>
					<view class="container__card--form-value">{{data.Reason}}</view>
				</view>
			</view>
		</process>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import Process from '@/pages/home/child/add-attend/components/process.vue'
	
	export default {
		components: {
			Process,
		},
		data() {
			return {
				process: {},
				data: {}
			}
		},
		onLoad(options) {
			try {
				this.process = JSON.parse(options.data);
				console.log(this.process)
			} catch {}
			this.getChangeAttendInfo()
		},
		onUnload() {
			uni.$off('process-confirm')
		},
		methods: {
			/**
			 * 流程结束回调
			 * @param {Object} v
			 */
			confirm(v) {
				this.changeAttendPass({
					insflowid: v.insflowid
				})
			},
			/**
			 * 调班申请通过
			 */
			changeAttendPass(apiparam) {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'changeAttendPass',
						code: 3,
						apiparam,
						success(res) {
							uni.showToast({
								title: '流程结束',
								icon: 'sucess'
							})
						}
					})
				})
			},
			formatId(id) {
				try {
					id = id.replace(/-| |:/g, '')
				} catch {}
				return id
			},
			/**
			 * 获取调班业务信息
			 */
			getChangeAttendInfo() {
				let that = this;
				return new Promise((resolve,reject) => {
					_custom.getDataJava({
						apiname: 'getChangeAttendInfo',
						apiparam: {
							insflowid: this.process.InsFlowId,
						},
						success(res) {
							if(res.length) {
								that.data = res[0];
							}
						}
					})
				})
			},
 		}
	}
</script>

<style scoped lang="scss">
	.container {
		position: relative;
		overflow-x: hidden;
		
		&__card {
			background-color: #fff;
			padding: 20rpx 30rpx;
			
			&--form {
				padding: 10rpx 0;
				
				&-label {
					color: #999;
					font-size: 28rpx;
				}
				
				&-value {
					font-size: 30rpx;
					white-space: pre-wrap;
					color: #555;
				}
			}
			
			&--detail {
				background-color: #eee;
				padding: 20rpx;
				border-radius: 20rpx;
				
				&-total {
					font-size: 32rpx;
					font-weight: bold;
				}
				
				&-steps {
					margin-top: 20rpx;
					
					&-item {
						padding-left: 30rpx;
						position: relative;
						
						&::before {
							position: absolute;
							left: 0rpx;
							top: 50%;
							transform: translateY(-50%);
							content: '';
							display: block;
							width: 15rpx;
							height: 15rpx;
							background-color: #aaa;
							border-radius: 50%;
						}
						
						&:not(:last-child)::after {
							position: absolute;
							left: 5.5rpx;
							top: 35rpx;
							content: '';
							display: block;
							width: 4rpx;
							height: 35rpx;
							background-color: #aaa;
						}
					}
				}
			}
		}
	}
	
	.process-tabbar /deep/ .u-tabbar__content {
		background-color: #eee;
		padding-top: 20rpx;
		padding-bottom: 40rpx;
	}
</style>
